import * as echarts from 'echarts'
export const setOption = function(title:string,color:string,xData:number[] | undefined,yData:number[],min:number,max:number) {
    let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: 'rgb(126,199,255)',
                },
            },
        },
        legend: {
            show: true,
            top: "2%",
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        grid: {
            top: '17%',
            left: '10%',
            right: '7%',
            bottom: '10%',
        },
        xAxis: [
            {
                name: "次",
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: 'rgb(41,188,245)',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xData,
            },
        ],
        yAxis: [
            {
                name: "数值",
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 12,
                    padding: [0, 60, 0, 0]
                },
                min,
                max,
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1160a0',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: title,
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        color, // 线条颜色
                    },
                },
                itemStyle: {
                    normal: {
                        color,//拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: true, //开启显示
                            color: '#fff',
                            position: 'top', //在上方显示
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value
                                } else {
                                    return 0
                                }
                            },
                        },
                    },

                },
                symbolSize: 8,   //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#00ffa230',
                                },
                                {
                                    offset: 0.6,
                                    color: '#00ffa220',
                                },
                                {
                                    offset: 1,
                                    color: '#00ffa210',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: yData
            }
        ]
    }
    return option
}

// 振动曲线
export const AccOption = function(title: string[],color: string[],xData:number[],yData:Array<Array<number>>,min: number | undefined,max:number | undefined) {
   let option = {
      backgroundColor: 'rgba(0,0,0,0)',
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              lineStyle: {
                  color: 'rgb(126,199,255)',
              },
          },
      },
      legend: {
          show: true,
          top: "2%",
          itemWidth: 30, // 图例标记的图形宽度。
          //   itemGap: 20, // 图例每项之间的间隔。
          itemHeight: 10, //  图例标记的图形高度。
          textStyle: {
              color: '#fff',
              fontSize: 14,
              padding: [0, 8, 0, 8]
          }
      },
      grid: {
          top: '17%',
          left: '10%',
          right: '7%',
          bottom: '10%',
      },
      xAxis: [
          {
              name: "次",
              type: 'category',
              boundaryGap: false,
              axisLine: {
                  //坐标轴轴线相关设置。数学上的x轴
                  show: true,
                  lineStyle: {
                      color: 'rgb(41,188,245)',
                  },
              },
              axisLabel: {
                  //坐标轴刻度标签的相关设置
                  textStyle: {
                      color: '#FFFFFF',
                      fontSize: 12,
                  },
              },
              splitLine: {
                  show: false,
                  lineStyle: {
                      color: '#233653',
                  },
              },
              axisTick: {
                  show: false,
              },
              data: xData,
          },
      ],
      yAxis: [
          {
              name: "数值",
              nameTextStyle: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [0, 60, 0, 0]
              },
              min,
              max,
              // minInterval: 1,
              type: 'value',
              splitLine: {
                  show: true,
                  lineStyle: {
                      color: '#1160a0',
                      type: 'dashed'
                  },
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: '#008de7',
                  },
              },
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: '#fff',
                      fontSize: 14
                  }
              },
              axisTick: {
                  show: false,
              },
          },
      ],
      series: [
          {
              name: title[0],
              type: 'line',
              symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
              smooth: true,
              lineStyle: {
                  normal: {
                      width: 3,
                      color: color[0], // 线条颜色
                  },
              },
              itemStyle: {
                  normal: {
                      color: color[0],//拐点颜色
                      // borderColor: '#fff600',//拐点边框颜色
                      // borderWidth: 13//拐点边框大小
                      label: {
                          show: true, //开启显示
                          color: '#fff',
                          position: 'top', //在上方显示
                          formatter: function (res) {
                              if (res.value) {
                                  return res.value
                              } else {
                                  return 0
                              }
                          },
                      },
                  },

              },
              symbolSize: 8,   //设定实心点的大小
              areaStyle: {
                  normal: {
                      //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                              {
                                  offset: 0,
                                  color: '#00ffa230',
                              },
                              {
                                  offset: 0.6,
                                  color: '#00ffa220',
                              },
                              {
                                  offset: 1,
                                  color: '#00ffa210',
                              },
                          ],
                          false
                      ),
                  },
              },
              data: yData[0]
          },
          {
            name: title[1],
            type: 'line',
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            smooth: true,
            lineStyle: {
                normal: {
                    width: 3,
                    color: color[1], // 线条颜色
                },
            },
            itemStyle: {
                normal: {
                    color: color[1],//拐点颜色
                    // borderColor: '#fff600',//拐点边框颜色
                    // borderWidth: 13//拐点边框大小
                    label: {
                        show: true, //开启显示
                        color: '#fff',
                        position: 'top', //在上方显示
                        formatter: function (res) {
                            if (res.value) {
                                return res.value
                            } else {
                                return 0
                            }
                        },
                    },
                }
            },
            symbolSize: 8,   //设定实心点的大小
            areaStyle: {
                normal: {
                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: '#00ffa230',
                            },
                            {
                                offset: 0.6,
                                color: '#00ffa220',
                            },
                            {
                                offset: 1,
                                color: '#00ffa210',
                            },
                        ],
                        false
                    ),
                },
            },
            data: yData[1]
        }
      ]
  }
  return option
}

// 后台管理的历史曲线
export const amdinHistoryOption = function(data:any) {
   let xData = data.map(item => item.date)
var data1Arr = data.map(item => item.normal) // 数据1
var data2Arr = data.map(item => item.warning); // 数据2
var data3Arr = data.map(item => item.error); // 数据3

var dataName = ['正常', '警告', '报警',];
let zoomShow = xData.length > 4

let dataList = [data1Arr, data2Arr, data3Arr];
let colorList = ["#48d579", "#f1c40f", "#f75b60"];

    let seriousList = [];
    dataName.map((item, index) => {
    seriousList.push({
        name: dataName[index],
        label: {
            show: false,
        },
        color: colorList[index],
        itemStyle: {
            barBorderRadius: [2, 2, 0, 0],
        },
        type: "bar",
        barWidth: "12", //柱型宽度
        data: dataList[index],
     })
    })
    let option = {
        tooltip: {
           trigger: "axis",
           axisPointer: {
              type: 'none'
           },
           textStyle: {
              fontSize: 14,
           },
        },
        dataZoom: [{
           show: zoomShow, //flase直接隐藏图形
           type: 'slider',
           backgroundColor: 'transparent',
           brushSelect: false, // 是否开启刷选功能
           zoomLock: false, // 是否锁定选择区域大小
           height: 7,
           //left: 'center', //滚动条靠左侧的百分比
           bottom: 0,
           startValue: 0, //滚动条的起始位置
           endValue: 8, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
           handleStyle: {
              color: '#E8E8E8',
              borderColor: '#E8E8E8',
           },
           fillerColor: '#E8E8E8',
           borderColor: 'transparent',
           showDetail: false,
           dataBackground: {
              areaStyle: {
                 opacity: 0
              },
              lineStyle: {
                 color: 'transparent'
              },
           },
        }],
        legend: {
           data: dataName,
           right: "24",
           top: '25',
           //icon: "circle",
           itemWidth: 15, // 设置宽度
           itemHeight: 15, // 设置高度
           itemGap: 32,
           textStyle: {
              color: 'rgba(0, 0, 0, 0.85)',
              fontFamily: 'Source Han Sans CN-Regular',
              fontSize: 14,
              padding: [0, 0, 0, 5]
           },
        },
        grid: {
           left: "24",
           right: "24",
           bottom: zoomShow ? "50" : "22",//下边距,
           top: '78',
           containLabel: true,
        },
        xAxis: [{
           type: "category",
           axisLine: {
              show: true,
              lineStyle: {
                 color: "#cccccc",
              },
           },
           axisTick: {
              show: false,
           },
           axisLabel: {
              color: "rgba(0, 0, 0, 0.85)",
              textStyle: {
                 fontSize: 14,
                 fontFamily: 'Source Han Sans CN-Regular',
              },
           },
           data: xData,
        },],
        yAxis: [{
           name: '单位：次数',
           nameTextStyle: {
              color: 'rgba(0, 0, 0, 0.45)',
              fontSize: 14,
              fontFamily: 'Source Han Sans CN-Regular',
              align: "left",
              padding: [0, 0, -5, 0]
           },
           type: "value",
           splitLine: { //y轴网格线
              lineStyle: {
                 color: "rgba(0, 0, 0, 0.1)",
                 type: 'dashed',
              },
           },
           axisLabel: { //y轴文本
              //showMinLabel: false, //y轴是否设置最小刻度0
              color: "rgba(0, 0, 0, 0.85)",
              textStyle: {
                 fontSize: 14,
                 fontFamily: 'Source Han Sans CN-Regular',
              },
           },
           axisTick: {
              show: false,
           },
           axisLine: { //y轴线
              show: false,
              lineStyle: {
                 color: '#D1D1D1',
              },
           },
        },],
        series: seriousList
     }
     return option
}

// 后台管理的饼图
export const adminDeviceOption = function() {
    const bgColors = [
        'rgba(118, 93, 247,0.4)',   
        'rgba(255, 169, 101, 0.4)',
        'rgba(107, 165, 255, 0.4)',
        'rgba(162, 134, 254, 0.4)',
        'rgba(75, 210, 201, 0.4)'
     ];
     const colors = ['#765df7','#f75b60', '#f87837', '#2a90f6', '#4BD2C9']
     const names = [
        '紫外',
        '红外',
        '温度',
        '湿度',
        '压力'
     ]
     
     const bgSeriesData = []
     const seriesData = []
     const values = [20,20,20,20,20]
     
     names.forEach((item, index) => {
        bgSeriesData.push({
           name: item,
           value: values[index],
           itemStyle: {
              color: bgColors[index]
           }
        })
        seriesData.push({
           name: item,
           value: values[index],
           itemStyle: {
              color: colors[index]
           }
        })
     })
     
     
     
     let option = {
        backgroundColor: '#fff',
        title: {
           top: '48%',
           left: 'center',
           textStyle: {
              color: '#666666',
              fontSize: 17,
              fontWeight: 400
           },
           subtextStyle: {
              color: '#333333',
              fontSize: 12,
              fontWeight: 400
           }
        },
        series: [
           {
              type: 'pie',
              radius: ['40%', '54%'],
              center: ['50%', '50%'],
              labelLine: {
                 show: true,
                 length2: 100,
                 length: 20,
                 lineStyle: {
                    color: '#DDDDDD'
                 }
              },
              label: {
                 show: true,
                 position: 'outside',
                 distanceToLabelLine: -70,
                 rich: {
                    name0: {
                       color: '#333333',
                       fontSize: 14,
                       fontWeight: 400,
                       padding: [0, 0, 8, 6]
                    },
                    name1: {
                       color: '#333333',
                       fontSize: 14,
                       fontWeight: 400,
                       padding: [0, 0, 8, 6]
                    },
                    name2: {
                       color: '#333333',
                       fontSize: 14,
                       fontWeight: 400,
                       padding: [0, 20, 8, 6]
                    },
                    name3: {
                       color: '#333333',
                       fontSize: 14,
                       fontWeight: 400,
                       padding: [0, 20, 8, 6]
                    },
                    name4: {
                        color: '#333333',
                        fontSize: 14,
                        fontWeight: 400,
                        padding: [0, 20, 8, 6]
                     },
                    zb0: {
                       color: '#666666',
                       fontWeight: 400,
                       fontSize: 13,
                       padding: [8, 0, 0, 12]
                    },
                    zb1: {
                       color: '#666666',
                       fontWeight: 400,
                       fontSize: 13,
                       padding: [8, 0, 0, 12]
                    },
                    zb2: {
                       color: '#666666',
                       fontWeight: 400,
                       fontSize: 13,
                       padding: [8, 0, 0, 12],
                       align: 'left'
                    },
                    zb3: {
                       color: '#666666',
                       fontWeight: 400,
                       fontSize: 13,
                       padding: [8, 0, 0, 12],
                       align: 'left'
                    },
                    dot0: {
                       backgroundColor: '#7561f4',
                       width: 6,
                       height: 6,
                       padding: [0, 0, 0, 0],
                       borderRadius: 3,
                       verticalAlign: 'top'
                    },
                    dot1: {
                       backgroundColor: '#f75b60',
                       width: 6,
                       height: 6,
                       padding: [0, 0, 0, 0],
                       borderRadius: 3,
                       verticalAlign: 'top'
                    },
                    dot2: {
                       backgroundColor: '#f87837',
                       width: 6,
                       height: 6,
                       padding: [0, 0, 0, 0],
                       borderRadius: 3,
                       verticalAlign: 'top'
                    },
                    dot3: {
                       backgroundColor: '#2a90f6',
                       width: 6,
                       height: 6,
                       padding: [0, 0, 0, 0],
                       borderRadius: 3,
                       verticalAlign: 'top'
                    },
                    dot4: {
                        backgroundColor: '#4BD2C9',
                        width: 6,
                        height: 6,
                        padding: [0, 0, 0, 0],
                        borderRadius: 3,
                        verticalAlign: 'top'
                     }
                 },
                 formatter: (params) => {
                    const x = params.dataIndex
                    return '{dot' + x + '|}' + '{name' + x + '|' + params.data.name + '}' + '\n' + '{' + '点击查看状态' + '}'
                 }
              },
              data: seriesData
           },
           {
              type: 'pie',
              radius: ['32%', '40%'],
              center: ['50%', '50%'],
              labelLine: {
                 show: false
              },
              label: {
                 show: false
              },
              silent: true,
              data: bgSeriesData
           }
        ]
     };
     
      return option
}

// 后台管理的状态(总量)

export const adminDeviceStatusOption = function(xData,data1Arr,data2Arr,data3Arr) {
    let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['正常', '警告', '报警']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: '正常',
            type: 'line',
            stack: 'Total',
            color: '#48d579',
            data: data1Arr
          },
          {
            name: '警告',
            type: 'line',
            stack: 'Total',
            color: '#f87837',
            data: data2Arr
          },
          {
            name: '报警',
            type: 'line',
            stack: 'Total',
            color: '#f75b60',
            data: data3Arr
          }
        ]
      };
      return option
}

export const Adminanayle = (timeData:any,selectParmas:any,xData:any,yData:any,time:any="时间段") => {
    const moduleList = {
        uvc: {
            color: "#9b59b6",
            name: "紫外"
        },
        tem: {
            color: "#e74c3c",
            name: "温度"
        },
        inf: {
            color: "pink",
            name: "红外"
        },
        hum: {
            color: "#3498db",
            name: "湿度"
        },
        pre: {
            color: "#f1c40f",
            name: "压力"
        }
    }
    // @ts-ignore
    let title = selectParmas? "模块"+ selectParmas[0] + (moduleList[selectParmas[1]].name): "实列趋势"
    //@ts-ignore
    let color = selectParmas? (moduleList[selectParmas[1]].color): "pink"
    let option = {
        legend: {
            top: '4%',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
        xAxis: {
          type: 'category',
          data: timeData
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
            {
                type: 'inside',
                show: true,
                // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
                start: 0,
                // 数据窗口范围的结束百分比。范围是：0 ~ 100。
                end: 100,
                zoomOnMouseWheel: true,
                // 第一个 dataZoom 组件
                xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
            },
            
        ],
        series: [
          {
            name: title,
            type: 'line',
               lineStyle: {
                  color // 设置第一条折线颜色
              },
            data: xData
          },
          //折线图流光配置
          {
            name: time,
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            polyline: true,
            effect: {
              show: true,//是否展示
              period:10,//时间
              trailLength:0.1,//尾部长度
              symbolSize: 12,//点大小
              symbol: 'circle',//点的类型
              color,//颜色
            },
            data: [{
                //coords:[['x轴数据'，y轴数据]] 一一对应拼接
              coords:yData
            }]
          }
        ]
      };
  return option     
}